<template>
    <div class="infoDialog">
        <vs-dialog v-model="infoDialogActive" width="500px" scroll>
            <template #header>
                <h4 class="not-margin"> 填写信息 </h4>
            </template>
            <div class="infoDialog-submit">
                <el-form :model="contactForm" :rules="contactRules" ref="contactFormRef">
                    <el-form-item prop="name">
                        <el-input style="width:400px" v-model="contactForm.name" placeholder="请输入您的姓名"
                            size="medium"></el-input>
                    </el-form-item>
                    <div class="flex_bet phone">
                        <el-form-item prop="phone" class="phone-box">
                            <el-input class="phoneInput" style="width: 270px;" v-model="contactForm.phone"
                                placeholder="请输入您的电话" size="medium">
                                <template slot="append">
                                    <span @click.stop="getCodeMsg" v-if="!isCode">发送验证码 </span>
                                    <span v-else>{{ codeTime }}s </span>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="code">
                            <el-input style="width:120px" v-model="contactForm.code" placeholder="输入验证码"
                                size="medium"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item prop="company">
                        <el-input style="width:400px" v-model="contactForm.company" placeholder="请输入您的企业名称"
                            size="medium"></el-input>
                    </el-form-item>
                    <el-form-item prop="business">
                        <el-select style="width:400px" v-model="contactForm.business" placeholder="请选择您的需求" size="medium"
                            :popper-append-to-body="false">
                            <el-option v-for="item in contactList" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </div>
            <template #footer>
                <div class="footer-dialog">
                    <vs-button @click="onSubmit" :loading="addLoading" style="
                        background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                        font-size: 18px;
                        padding: 6px 0;
                        width: 100%;
                        margin-top: 0px;
                        border-radius:8px;">一键提交</vs-button>
                </div>
            </template>
        </vs-dialog>
    </div>
</template>
<script>
import { setCodeMsg, websiteInfoSubmit } from '@/api/index'
export default {
    data() {
        let checkPhone = (rule, value, callback) => {
            if (value) {
                let isPhone = /^1\d{10}$/;
                let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
                // if (!reg.test(value) && !isPhone.test(value) && value) {
                if (!isPhone.test(value) && value) {
                    callback(new Error("请输入正确的手机号/座机号"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        return {
            addLoading: false,
            contactForm: {
                phone: null,
                company: null,
                name: null,
                code: null,
                business: null,

            },
            infoDialogActive: false,
            contactList: [
                {
                    id: 1,
                    name: "易播数字人",
                },
                {
                    id: 2,
                    name: "牛视3.0",
                },
                {
                    id: 3,
                    name: "智企云平台",
                }
            ],
            contactRules: {
                name: [
                    {
                        required: true,
                        message: "请输入您的姓名",
                        trigger: "blur",
                    },
                ],
                company: {
                    required: true,
                    message: "请输入您的企业名称",
                    trigger: "blur",
                },
                code: {
                    required: true,
                    message: "请输入验证码",
                    trigger: "blur",
                },
                business: {
                    required: true,
                    message: "请选择您的需求",
                    trigger: "change",
                },
                phone: [
                    {
                        required: true,
                        message: "请正确输入您的联系电话",
                        trigger: "blur",
                    },
                    { validator: checkPhone, trigger: 'blur' }
                ],
            },
            codeTime: 60,
            isCode: false,
            time: null,
            countdownTime: null
        }
    },
    beforeCreate() {
        let imgs = [
            "https://static.pdwl.net/jituan/images/home/icon4.png"
        ]
        imgs.forEach((item)=>{
            let img = new Image();
            img.src = item;
            img.onload = function(){}
        })
    },
    methods: {
        openInfoDialog() {
            this.infoDialogClose()
            this.infoDialogActive = true
        },
        infoDialogClose() {
            this.contactForm = {
                phone: null,
                company: null,
                name: null,
                code: null,
                business: null,
            }
        },
        //获取验证码
        async getCodeMsg() {
            let that = this
            if (that.time) return
            let isPhone = /^1\d{10}$/;
            if (!this.contactForm.phone) return this.$message.error('请输入您的手机号码')
            if (!isPhone.test(this.contactForm.phone)) return this.$message.error('请正确输入手机号')
            that.isCode = true
            that.countdownTime = setInterval(() => {
                if (that.codeTime <= 0) {
                    that.time = false
                    that.isCode = false
                    clearInterval(that.countdownTime)
                } else that.codeTime--
                that.$forceUpdate()
            }, 1000)
            let res = await setCodeMsg(this.contactForm.phone)
            if (res.code == 1) {
                this.$message.success('验证码已发送')
            }
        },
        onSubmit() {
            let that = this
            that.$refs.contactFormRef.validate(async (valid) => {
                if (valid) {
                    that.addLoading = true
                    try {
                        let res = await websiteInfoSubmit(that.contactForm)
                        that.addLoading = false
                        if (res.code == 1) {
                            that.$message.success('您的需求已提交成功，客户经理将在24小时内拜访您，请耐心等待，谢谢')
                            that.infoDialogActive = false
                            that.infoDialogClose()
                            console.log(res)
                        }
                    } catch (error) {
                        that.addLoading = false;
                    }
                }
            })
        }

    }
}
</script>
<style lang="scss" scoped>
.not-margin {
    font-size: 24px;
    background: linear-gradient(360deg, #006AF3 0%, #62DEA6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 24px;
    margin-bottom: 10px;

}

.footer-dialog {
    width: 400px;
    margin: 0 auto;
}

::v-deep .vs-dialog {
    background-image: url('https://static.pdwl.net/jituan/images/home/icon4.png') !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 500px;
    height: 500px;
    border-radius: 0;
}

::v-deep .vs-dialog__close {
    right: 30px;
    width: 30px;
    top: 24px;
    height: 30px;
    background: aliceblue;
    color: cornflowerblue;
    border-radius: 50%;
}

.infoDialog-submit {
    margin: 0 auto;
    width: 400px;

    ::v-deep .el-input__inner,
    .phone-l {
        background-color: rgba(0, 29, 123, .1);
        box-shadow: inset 0px 0px 5px 1px #001D7B;
        border: 1px solid #006FFF;
        height: 48px;
        color: #fff;
    }

    .phone-box {
        border: 1px solid #006FFF;
        border-radius: 5px;

        span {
            padding: 0 20px;
            border-left: 2px solid #0058CC;
            font-size: 14px;
            color: #ffffffd5;
            cursor: pointer;
        }

        ::v-deep .el-input-group__append {
            border: none;
            background: #001d7b00;
            border-left: 0;
            padding: 0;

        }

        ::v-deep .el-input__inner {
            border: none;
        }
    }

    ::v-deep .el-input__inner::placeholder {
        color: #fff;
    }
}
</style>
